<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="|${session.username}的个人页面|"></title>
    <link rel="shortcut icon" th:href="@{/images/a/logo.ico}"/>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
    <script src="https://fastly.jsdelivr.net/gh/lrplrplrp/bkyl2d@main/loads.js"></script>


    <script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">
    <link rel="stylesheet" th:href="@{/css/category.css}">
    <link th:href="@{/css/style3.css}" rel="stylesheet">


</head>
<body style="background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);">

<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top "
     style="background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);">
    <div class="container-fluid">
        <a class="navbar-brand ms-5" href="#">我的主页</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav col-10">
                <li class="nav-item ">
                    <a class="nav-link active" aria-current="page" th:href="@{/blog/intoMain}">返回</a>
                </li>
            </ul>
            <form class="d-flex me-5 col-2" role="search">
                <img th:src="|@{/images/}${session.pic}|" alt="用户头像" width="50" height="50"
                     style="border-radius: 50px"
                     class="d-inline-block align-text-top">
                <span style="font-size: 15px;"></span>
            </form>
        </div>
    </div>
</nav>

<div class="container mt-3">
    <div class="card" style="height:35vh;">
        <div class="card-header ">
            <div class="card-cover"
                 style="background-image: url('/images/a/home.png')"></div>
            <img class="card-avatar"
                 th:src="|@{/images/}${session.pic}|"
                 alt="avatar"/>
            <h1 class="card-fullname" th:text="${session.username}"></h1>
            <h2 class="card-jobtitle" th:text="|个性签名:${session.motto}|"></h2>
        </div>
        <div class="row mt-5 d-flex justify-content-center">
            <div class="row" style="font-size: 20px;">
                <a th:href="@{/blog/loginOut}" class="btn btn-success col-2 me-2 mb-2">退出</a>
                <a class="btn btn-success col-2 mb-2 me-2" th:href="@{/blog/editor1}">发布博客</a>
                <a class="btn btn-success col-2 mb-2 me-2" th:href="@{/blog/showInf}">修改信息</a>
                <div class="card-social col-6">
                    <a href="#">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15.997 3.985h2.191V.169C17.81.117 16.51 0 14.996 0c-3.159 0-5.323 1.987-5.323 5.639V9H6.187v4.266h3.486V24h4.274V13.267h3.345l.531-4.266h-3.877V6.062c.001-1.233.333-2.077 2.051-2.077z"/>
                        </svg>
                    </a>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                            <path d="M512 97.248c-19.04 8.352-39.328 13.888-60.48 16.576 21.76-12.992 38.368-33.408 46.176-58.016-20.288 12.096-42.688 20.64-66.56 25.408C411.872 60.704 384.416 48 354.464 48c-58.112 0-104.896 47.168-104.896 104.992 0 8.32.704 16.32 2.432 23.936-87.264-4.256-164.48-46.08-216.352-109.792-9.056 15.712-14.368 33.696-14.368 53.056 0 36.352 18.72 68.576 46.624 87.232-16.864-.32-33.408-5.216-47.424-12.928v1.152c0 51.008 36.384 93.376 84.096 103.136-8.544 2.336-17.856 3.456-27.52 3.456-6.72 0-13.504-.384-19.872-1.792 13.6 41.568 52.192 72.128 98.08 73.12-35.712 27.936-81.056 44.768-130.144 44.768-8.608 0-16.864-.384-25.12-1.44C46.496 446.88 101.6 464 161.024 464c193.152 0 298.752-160 298.752-298.688 0-4.64-.16-9.12-.384-13.568 20.832-14.784 38.336-33.248 52.608-54.496z"/>
                        </svg>
                    </a>
                    <a href="#">
                        <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                            <path d="M301 256c0 24.852-20.148 45-45 45s-45-20.148-45-45 20.148-45 45-45 45 20.148 45 45zm0 0"/>
                            <path d="M332 120H180c-33.086 0-60 26.914-60 60v152c0 33.086 26.914 60 60 60h152c33.086 0 60-26.914 60-60V180c0-33.086-26.914-60-60-60zm-76 211c-41.355 0-75-33.645-75-75s33.645-75 75-75 75 33.645 75 75-33.645 75-75 75zm86-146c-8.285 0-15-6.715-15-15s6.715-15 15-15 15 6.715 15 15-6.715 15-15 15zm0 0"/>
                            <path d="M377 0H135C60.562 0 0 60.563 0 135v242c0 74.438 60.563 135 135 135h242c74.438 0 135-60.563 135-135V135C512 60.562 451.437 0 377 0zm45 332c0 49.625-40.375 90-90 90H180c-49.625 0-90-40.375-90-90V180c0-49.625 40.375-90 90-90h152c49.625 0 90 40.375 90 90zm0 0"/>
                        </svg>
                    </a>
                    <a href="#">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M23.994 24v-.001H24v-8.802c0-4.306-.927-7.623-5.961-7.623-2.42 0-4.044 1.328-4.707 2.587h-.07V7.976H8.489v16.023h4.97v-7.934c0-2.089.396-4.109 2.983-4.109 2.549 0 2.587 2.384 2.587 4.243V24zM.396 7.977h4.976V24H.396zM2.882 0C1.291 0 0 1.291 0 2.882s1.291 2.909 2.882 2.909 2.882-1.318 2.882-2.909A2.884 2.884 0 002.882 0z"/>
                        </svg>
                    </a>
                </div>
            </div>

        </div>

    </div>
</div>

<div class="container border mt-3" style="background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);">
    <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home"
                    type="button" role="tab" aria-controls="nav-home" aria-selected="true">我的博客
            </button>
            <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile"
                    type="button" role="tab" aria-controls="nav-profile" aria-selected="false">我的收藏
            </button>
            <button class="nav-link" id="nav-draft-tab" data-bs-toggle="tab" data-bs-target="#nav-draft"
                    type="button" role="tab" aria-controls="nav-draft" aria-selected="false">我的草稿
            </button>
        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"
             tabindex="0">
            <div class="row mb-3 mt-2" th:each="text:${texts}">
                <div style="text-align: center;align-items: center; height: 500px;width: 100%" th:class="${tHid}">
                    <h4>您还没有发布博客，快去发布一篇博客吧~~</h4>
                </div>
                <div class="card mb-3 border me-1"
                     style="max-width: 1000px;background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);">
                    <div class="row g-0">
                        <div class="col-3"><img th:src="|@{/images/bac/b}${text.getNumber()}.jpg|"
                                                class="img-fluid rounded-start" style="width: 200px;height: 150px"
                                                alt="...">
                        </div>
                        <div class="card-body col-9"><h5 class="card-title row">
                            <a th:href="|@{/blog/showContent?title=}${text.title}|">
                                <strong th:text="${text.getTitle()}"></strong></a></h5>
                            <p class="card-text row" th:text="${text.getSubtitle()}"></p>
                            <p class="card-text row">
                                <small class="col-8" th:text="|时间:${text.createdate}|"></small>
                                <small
                                        class="text-muted col-4"
                                        th:text="|tag:${text.cid},${text.mid}|">
                                </small>
                                <i class="iconfont icon-weibo-logo"></i><i class="iconfont icon-douyin"></i>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="row mb-4">
                    <a th:href="|@{/blog/changeText?title=}${text.title}|" type="button"
                       class="col-6 btn btn-outline-success change">修改</a>
                    <a type="button" class="col-6 delete btn btn-outline-success" th:data-id="${text.title}">删除</a>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
            <div id="show-category  mt-2" style="height: 500px;width: 100%;">
                <div class="container">
                    <div class="row">
                        <div class="col-4 border">
                            <!-- 收藏夹名称 -->
                            <div class="tab-head">
                                <ul class="list-group p-1">
                                    <li class="list-group-item">
                                        <span class="text-primary" data-bs-toggle="modal"
                                              data-bs-target="#add-exampleModal"
                                              data-bs-whatever="@mdo">新建收藏夹</span>
                                        <div class="modal fade" id="add-exampleModal" tabindex="-1"
                                             aria-labelledby="add-exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="add-exampleModalLabel">
                                                            新建</h1>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form>
                                                            <div class="mb-3">
                                                                <label class="col-form-label">收藏夹名称</label>
                                                                <input type="text" class="form-control"
                                                                       id="add-category-name">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="message-text"
                                                                       class="col-form-label">介绍</label>
                                                                <textarea class="form-control"
                                                                          id="message-text"></textarea>
                                                            </div>
                                                        </form>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                                data-bs-dismiss="modal">
                                                            取消
                                                        </button>
                                                        <button type="button" class="btn btn-primary"
                                                                id="add-category-submit">
                                                            提交
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="list-group-item tab-head-div" th:each="entry:${session.category}">
                                        <span th:text="${entry.key.categoryname}"></span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-8 border">
                            <!-- 收藏夹文章内容 -->
                            <div class="tab-body mt-3"
                                 style="background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);">
                                <div class="tab-body-div" th:each="entry:${session.category}">
                                    <div class="container messgae">
                                        <div class="category-name">
                                            <h4 th:text="${entry.key.categoryname}">
                                            </h4>
                                            <p th:text="${entry.key.introduction}">
                                            </p>
                                            <button class="update-category border-0 bg-white" type="button"
                                                    th:data-category="${entry.key.categoryname}">修改
                                            </button>
                                            |
                                            <button class="delete-category border-0 bg-white" type="button"
                                                    th:data-category="${entry.key.categoryname}">删除
                                            </button>
                                        </div>
                                    </div>
                                    <ul class="list-group">
                                        <li class="list-group-item" th:each="text:${entry.value}">
                                            <!--                                            此处的title不能为空-->
                                            <a th:href="|@{/blog/showContent2?title=}${text.title}&phone=${text.phone}&sub=${text.subtitle}|"
                                               class="text-decoration-none" th:text="${text.title}">
                                            </a>
                                            <button class="delete-article btn-outline-danger btn" type="button"
                                                    th:data-text_title="${text.title}"
                                                    th:data-category="${entry.key.categoryname}">移除
                                            </button>
                                        </li>
                                        </button>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade show " id="nav-draft" role="tabpanel" aria-labelledby="nav-draft-tab"
             tabindex="0">
            <div class="row mb-3 mt-2" th:each="draft:${drafts}">
                <div style="text-align: center;align-items: center; height: 500px;width: 100%" th:class="${dHid}">
                    <h4>草稿箱为空</h4>
                </div>
                <div class="card mb-3 border me-1"
                     style="max-width: 1000px;background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);">
                    <div class="row g-0">
                        <div class="col-3"><img th:src="|@{/images/bac/b}${draft.getNumber()}.jpg|"
                                                class="img-fluid rounded-start" style="width: 200px;height: 150px"
                                                alt="...">
                        </div>
                        <div class="card-body col-9"><h5 class="card-title row">
                            <a th:href="|@{/blog/editor2?title=}${draft.title}|">
                                <strong th:text="${draft.title}"></strong></a></h5>
                            <p class="card-text row" th:text="${draft.subtitle}"></p>
                            <p class="card-text row">
                                <small class="col-8" th:text="|时间:${draft.createdate}|"></small>
                                <small
                                        class="text-muted col-4"
                                        th:text="|tag:${draft.cid},${draft.mid}|">
                                </small>
                                <i class="iconfont icon-weibo-logo"></i><i class="iconfont icon-douyin"></i>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="row mb-4">
                    <a th:href="|@{/blog/changeText?title=}${draft.title}|" type="button"
                       class="col-6 btn btn-outline-success change">修改</a>
                    <a type="button" class="col-6 delete btn btn-outline-success" th:data-id="${draft.title}">删除</a>
                </div>
            </div>
        </div>
    </div>
</div>

<footer class="footer bg-dark py-3 mt-auto ">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <h5 class="text-white">关于我们</h5>
                <p class="text-secondary">这是我们的java期末项目—— 个人博客系统 </p>
            </div>
            <div class="col-md-3">
                <h5 class="text-white">网站详情</h5>
                <p class="text-secondary">一个基础的个人博客系统 更多友好的功能还有待开发</p>
            </div>
            <div class="col-md-3">
                <h5 class="text-white">联系我们</h5>
                <ul class="list-unstyled text-secondary">
                    <li><i class="fas fa-home mr-2"></i> 地址: 重庆师范大学</li>
                    <li><i class="fas fa-envelope mr-2"></i> 邮箱: 3073130784@qq.com</li>
                    <li><i class="fas fa-phone mr-2"></i> 电话: 123-456-7890</li>
                </ul>
            </div>
            <div class="col-md-3">
                <h5 class="text-white">社交媒体</h5>
                <ul class="list-inline text-muted">
                    <!-- iconfont -->
                    <li class="list-inline-item">
                        <a href="#">
                            <i class="iconfont icon-qq" style="font-size: 30px;"></i>
                            <!-- <i class="fab fa-facebook fa-2x"></i>   -->
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#">
                            <i class="iconfont icon-weixin" style="font-size: 30px;"></i>
                            <!-- <i class="fab fa-twitter fa-2x"></i>   -->
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a href="#">
                            <i class="iconfont icon-douyin" style="font-size: 30px;"></i>
                            <!-- <i class="fab fa-instagram fa-2x"></i>   -->
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</footer>
<script type="text/javascript" th:src="@{/js/bootstrap.bundle.js}"></script>
<script>
    /**
     * 点击 通过异步请求刷新
     */
    $(document).ready(function () {

        if (window.screen.width > window.screen.height) {
            $("#pc").show();
            // $("#mp").hide()
        }
        //删除博客
        $('.delete').click(function () {
            console.log($(this).data('id'));
            let etitle = $(this).data('id');
            let queryString = '?title=' + etitle;
            $.ajax({
                url: 'deleteText' + queryString,
                type: 'GET',
                success: function (data) {
                    // 处理成功响应
                    // 请求成功时的处理逻辑
                    if (data.success === true) {
                        alert("已删除");
                        location.reload(); // 刷新整个页面
                    } else {
                        alert("服务器忙")
                    }
                },
                error: function (xhr, status, error) {
                    // 处理错误
                    // 请求失败时的处理逻辑
                    console.error('响应失败:', status, error);
                    alert('发送删除请求到后端时出错');
                }
            });
        });

        // 1.新建收藏夹
        $("#add-category-submit").click(function () {
            $.ajax({
                url: "/CategoryController/addCategory",
                data: {
                    category: $("#add-category-name").val(),
                    introduction: $("#message-text").val(),
                },
                success: function (data) {
                    alert(data.result);
                    location.reload();
                }
            })
        })

        //2.删除收藏夹（文章也会被删）
        let deleteCategory = function () {
            $.ajax({
                url: "/CategoryController/deleteCategory",
                data: {
                    category: $(this).data("category"),
                },
                success: function (data) {
                    alert(data.result);
                    location.reload();
                }
            })
        }
        $(".delete-category").click(deleteCategory);

        //3.更改收藏夹名称
        let updateArticle = function () {
            let newCategory = prompt("请输入新修改的名称：");
            if (newCategory != "" && newCategory != null) {
                $.ajax({
                    url: "/CategoryController/updateCategory",
                    data: {
                        old: $(this).data("category"),
                        new: newCategory,
                    },
                    success: function (data) {
                        alert(data.result);
                        location.reload();
                    }
                })
            } else {
                alert("输入不得为空！！");
            }
        }
        $(".update-category").click(updateArticle);

        //4.移除文章出收藏夹
        let deleteArticle = function () {
            console.log($(this).data("category"));
            console.log($(this).data("text_title"));
            $.ajax({
                url: "/CategoryController/deleteArticle",
                data: {
                    category: $(this).data("category"),
                    text_title: $(this).data("text_title"),
                },
                success: function (data) {
                    alert(data.result);
                    location.reload();
                }
            })
        }
        $(".delete-article").click(deleteArticle)
    });

    const heads = document.getElementsByClassName('tab-head-div');
    const bodys = document.getElementsByClassName('tab-body-div');
    for (let i = 0; i < heads.length; i++) {
        heads[i].onclick = function () {
            for (let i = 0; i < bodys.length; i++) {
                if (heads[i] == this) {
                    heads[i].classList.add('current');
                    bodys[i].classList.add('current');

                } else {
                    heads[i].classList.remove('current');
                    bodys[i].classList.remove('current');
                }
            }
        }
    }

</script>
</body>
</html>